<template>
    <el-main>

        <el-form :inline="true" class="demo-form-inline">
            <el-form-item label="角色名称">
                <el-input v-model="queryForm.name" clearable placeholder="角色名称"></el-input>
            </el-form-item>
            <el-form-item label="角色编码">
                <el-input v-model="queryForm.nameZh" clearable placeholder="角色编码"></el-input>
            </el-form-item>
            <el-form-item label="开始时间">
                <el-date-picker
                        v-model="queryForm.createdStart"
                        type="datetime" value-format="yyyy-MM-dd HH:mm:ss"
                        placeholder="选择日期">
                </el-date-picker>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="onQuery">查询</el-button>
            </el-form-item>
        </el-form>

        <el-table
                ref="multipleTable"
                :data="tableData"
                tooltip-effect="dark"
                style="width: 100%"
                @selection-change="handleSelectionChange">
            <el-table-column
                    type="selection"
                    width="55">
            </el-table-column>

            <el-table-column
                    sortable=""
                    prop="name"
                    label="角色名称"
                    width="120">
            </el-table-column>
            <el-table-column
                    prop="nameZh"
                    label="角色编码"
                    show-overflow-tooltip>
            </el-table-column>
            <el-table-column
                    prop="created"
                    label="创建时间"
                    show-overflow-tooltip>
            </el-table-column>
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button
                            size="mini"
                            @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                    <el-button
                            size="mini"
                            type="danger"
                            @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>

        <el-row>
            <el-col :span="6"><div class="grid-content bg-purple">
                <el-button type="primary" @click="add">添加</el-button>
                <el-button type="danger" @click="batchDel">批量删除</el-button>
            </div></el-col>
            <el-col :span="18"><div class="grid-content bg-purple-light">
                <el-pagination
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        :current-page="queryForm.pageNo"
                        :page-sizes="[3, 6, 9, 12]"

                        layout="total, sizes, prev, pager, next, jumper"
                        :total="total">
                </el-pagination>
            </div></el-col>
        </el-row>

        <el-dialog
                title="提示"
                :visible.sync="dialogVisible"
                width="60%">
            <span>
                <el-form label-position="left" label-width="80px">
                    <el-form-item label="Logo">
                        <el-upload
                                class="avatar-uploader"
                                action="http://localhost:8888/file/upload"
                                :show-file-list="false"
                                :on-success="handleAvatarSuccess"
                                :before-upload="beforeAvatarUpload">
                          <img v-if="saveForm.img" :src="saveForm.img" class="avatar">
                          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                        </el-upload>
                  </el-form-item>
                  <el-form-item label="角色名称">
                    <el-input v-model="saveForm.name"></el-input>
                  </el-form-item>
                  <el-form-item label="角色编码">
                    <el-input v-model="saveForm.nameZh"></el-input>
                  </el-form-item>
                </el-form>
            </span>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="save">确 定</el-button>
            </span>
        </el-dialog>
    </el-main>
</template>

<script>
    export default {
        name: "Role",
        data() {
            return {
                imageUrl: '',
                tableData:[{
                    id: 1,
                    date: '2016-05-03',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1518 弄'
                }, {
                    id: 2,
                    date: '2016-05-02',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1518 弄'
                }],
                queryForm:{
                    pageNo: 1,
                    pageSize: 3
                },
                saveForm:{
                    name:null
                },
                dataIds:[],
                dialogVisible:false,
                total:0
            }
        },
        methods:{
            handleAvatarSuccess(res, file) {
                console.log(res);
                // this.imageUrl = URL.createObjectURL(file.raw);
                this.saveForm.img=res.data.fileUrl;
            },
            beforeAvatarUpload(file) {
                const isJPG = file.type === 'image/jpeg';
                const isLt2M = file.size / 1024 / 1024 < 2;

                if (!isJPG) {
                    this.$message.error('上传头像图片只能是 JPG 格式!');
                }
                if (!isLt2M) {
                    this.$message.error('上传头像图片大小不能超过 2MB!');
                }
                return isJPG && isLt2M;
            },
            //表格选中的事件
            handleSelectionChange(rows){
                console.log(rows)
                //记录瞎选中的行的唯一标识，多少情况瞎是Id
                let ids = rows.map(row=>row.id);
                this.dataIds = ids;
                console.log(ids)
            },
            //批量删除
            batchDel() {
                //拿到要删除Ids
                console.log(this.dataIds)
                //调用ajax删除接口，删除数据
                this.axios.post("http://localhost:8888/role/del",{ids:this.dataIds}).then(res=>{
                    if (res.data.result) {
                        //刷新列表页（根据分页和查询条件Ajax请求后台列表数据，给给tableData，给分页组件的变量赋值）
                        this.getList();
                    }
                })

            },
            handleEdit(index,row) {
                console.log(index,row)
                //编辑，回显数据
                console.log( row.id )
                this.dialogVisible=true;
                this.saveForm=row;
            },
            handleDelete(index,row) {
                //根据Id执行删除操作
                console.log(row.id)

                this.$confirm('是否继续删除?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.axios.post("http://localhost:8888/role/del",{ids:[row.id]}).then(res=>{
                        if (res.data.result) {
                            //刷新列表页（根据分页和查询条件Ajax请求后台列表数据，给给tableData，给分页组件的变量赋值）
                            this.queryForm.pageNo=1;
                            this.getList();
                        }else{
                            this.$message(res.data.message);
                        }
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });

            },
            onQuery() {
                //拿到查询参数
                console.log(this.queryForm);
                //调用ajax接口列表查询
                //通过Ajax获取数据，给tableData，列表就显示了。
                this.getList();

            },
            //分页大小PageSize改变事件
            handleSizeChange(pageSize) {
                console.log(pageSize)
                this.queryForm.pageSize=pageSize;
                //根据分页和查询条件Ajax请求后台列表数据，给给tableData，给分页组件的变量赋值
                this.getList();

            },
            //点击分页事件
            handleCurrentChange(pageNo) {
                console.log(pageNo)
                this.queryForm.pageNo=pageNo;
                //根据分页和查询条件Ajax请求后台列表数据，给给tableData，给分页组件的变量赋值
                this.getList();

            },
            add() {
                //弹框或跳转到新页面
                this.dialogVisible=true;
                //设置saveForm为空对象：添加和编辑用的是同一个form：saveForm，如果saveForm有数据的花，添加的时候会显示
                this.saveForm={};
            },
            save() {
                //获取表单的数据
                console.log(this.saveForm)
                //关闭对话框
                this.dialogVisible=false;
                //调用ajax接口报错数据
                this.axios.post("http://localhost:8888/role/save",this.saveForm).then(res=>{
                    if (res.data.result) {
                        this.$message("保存成功");
                        //刷新列表页，也就是调用getList
                        this.getList();
                    }

                })


            },
            getList() {
                //通过Ajax获取数据，给tableData，列表就显示了。
                this.axios.get("http://localhost:8888/role/getList",{params:this.queryForm}).then(res=>{
                    console.log(res);
                    this.tableData = res.data.data.list;
                    this.total = res.data.data.total;
                })
                //给分页组件的变量赋值

            }

        },
        created() {
            this.getList();
        }
    }
</script>

<style scoped>
    .el-row {
        margin-top: 20px;
    }

    .avatar-uploader .el-upload {
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
    }
    .avatar-uploader .el-upload:hover {
        border-color: #409EFF;
    }
    .avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 178px;
        height: 178px;
        line-height: 178px;
        text-align: center;
    }
    .avatar {
        width: 178px;
        height: 178px;
        display: block;
    }
</style>